<template>
	<view>
		<view class="flex flex_column resect">
			<image src="../../../static/log0.png" mode="" class="logo"></image>
			<p class="title">重置密码</p>
			<view class="padding26">
				<u--form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm-login">
					<u-form-item prop="phone" class="u-form-item-login">
						<u-input prefixIcon="phone" v-model="form.phone" class="u-input-login" placeholder="请输入手机号">
						</u-input>
					</u-form-item>
					<u-form-item prop="code" class="u-form-item-login">
						<u-input prefixIcon="checkbox-mark" v-model="form.code" placeholder="请输入验证码">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="x秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="password" class="u-form-item-login" v-if="!passwordAble">
						<u-input prefixIcon="lock-fill" v-model="form.password" class="u-input-login"
							placeholder="请输入密码" password>
							<template slot="suffix">
								<u-icon v-show="form.password" name="eye-fill" @click="passwordAble=true"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="password" class="u-form-item-login" v-if="passwordAble">
						<u-input prefixIcon="lock-fill" v-model="form.password" class="u-input-login"
							placeholder="请输入密码">
							<template slot="suffix">
								<u-icon v-show="form.password" name="eye-off" @click="passwordAble=false"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="passwords" class="u-form-item-login" v-if="!passwordAble1">
						<u-input prefixIcon="lock-fill" v-model="form.passwords" class="u-input-login"
							placeholder="请再次输入密码" password>
							<template slot="suffix">
								<u-icon v-show="form.passwords" name="eye-fill" @click="passwordAble1=true"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item prop="passwords" class="u-form-item-login" v-if="passwordAble1">
						<u-input prefixIcon="lock-fill" v-model="form.passwords" class="u-input-login"
							placeholder="请再次输入密码">
							<template slot="suffix">
								<u-icon v-show="form.passwords" name="eye-off" @click="passwordAble1=false"></u-icon>
							</template>
						</u-input>
					</u-form-item>
				</u--form>
				<!-- <el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm-login">
					<el-form-item label="" prop="phone" class="el-form-item-login">
						<el-input prefix-icon="el-icon-user-solid" v-model="form.phone" class="el-input-login"
							placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item label="" prop="code" class="el-form-item-login">
						<view class="input-s-div">
							<el-input prefix-icon="el-icon-s-goods" v-model="form.code" class="input-s el-input-login"
								placeholder="请输入验证码"></el-input>
							<text v-show="show" class="input-t" @click="getYan('ruleForm')">{{text}}</text>
							<text v-show="!show" class="input-t">{{count}}s</text>
						</view>
					</el-form-item>
					<el-form-item label="" prop="password" class="el-form-item-login">
						<el-input prefix-icon="el-icon-s-goods" v-model="form.password" class="el-input-login"
							placeholder="请设置登陆密码" show-password></el-input>
					</el-form-item>
					<el-form-item label="" prop="passwords" class="el-form-item-login">
						<el-input prefix-icon="el-icon-s-goods" v-model="form.passwords" class="el-input-login"
							placeholder="请在次输入密码" show-password></el-input>
					</el-form-item>
				</el-form> -->
				<view class="login-btn">
					<button class="btn-size btn-b" @click="resect()">确认重置</button>
					<!-- <p class="login-btn-p" @click="userLogin()" v-if="type==1">直接登录</p> -->
					<p class="login-btn-p" @click="userLogins()">去登录</p>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		get_reg_sms,
		restPassword
	}
	from "@/api/login"
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3-9][0-9]\d{8}$/;
					// 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
					if (reg.test(value)) {
						callback();
					} else {
						// 具体错误信息没有提示
						return callback(new Error("请输入正确的手机号"));
					}
				}
			};
			return {
				passwordAble1:false,
				passwordAble:false,
				tips: '',
				value: '',
				show: true,
				count: 60,
				text: '',
				timer: null,
				type: "",
				password: "",
				form: {
					password: "",
					code: "",
					phone: ""
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: checkPhone,
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},{ min: 5, max: 20, message: '密码长度在 5 到 20 个字符', trigger: 'blur' }],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					},{ min: 5, max: 20, message: '密码长度在 5 到 20 个字符', trigger: 'blur' }]
				}
			};
		},
		onLoad(option) {
			this.type = option.id
		},
		watch: {
			value(newValue, oldValue) {
				// console.log('v-model', newValue);
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				this.$refs.ruleForm.validateField("phone", (res) => {
					console.log(res);
					if(res.length==0&&this.form.phone){
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
								let obj = {
									phonenumber: this.form.phone
								}
								get_reg_sms(obj).then(res => {
									console.log(res.msg);
									if (res.code == 200) {
										uni.$u.toast('验证码已发送');
									} else {
										uni.$u.toast( res.msg);
									}
								
								})
							}, 1000);
						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}else{
						
					}
				})
				
			},
			change(e) {
				console.log('change', e);
			},
			resect() {
				this.$refs.ruleForm.validate().then(valid => {
					if (valid) {
						if (this.form.password != this.form.passwords) {
							uni.showToast({
								title: "两次密码不一致",
								icon: 'error'
							})
							return
						}
						let params = {
							"clientId": "eeb9377d4b6debbc0a6e8756bbbbb4c7",
							"grantType": "phonePassword",
							"tenantId": "000001",
							"password": this.form.password,
							"phonenumber": this.form.phone,
							"smsCode": this.form.code,
						}
						restPassword(params).then(res => {
							console.log(res.data);
							if (res.code == 200) {
								uni.showToast({
									title: "重置成功",
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/login"
									})
								}, 500)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'error'
								})
							}

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})

			},
			userLogins() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>
<style lang="scss">
	::v-deep .el-form-item__error {
		position: absolute;
		top: 50px;
	}
</style>
<style lang="scss" scoped>
	.resect {
		.logo {
			// margin-top: 44px;
			margin-bottom: 24px;
			width: 100%;
			height: 25vh;
			border-radius: 12px 12px 12px 12px;
		}

		.title {
			margin-bottom: 24px;
			text-align: center;
			font-size: 24px;
			font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
			font-weight: 400;
			color: #3D3D3D;
		}

		.input-s-div {
			width: 100%;
			position: relative;
			right: 0;
			height: 100%;

			.input-t {
				position: absolute;
				right: 15px;
				top: 0px;
				font-size: 14px;
				font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
				font-weight: 400;
				color: #2F6CBC
			}
		}

		.input {
			width: 100%;
			position: relative;

			input {
				border-bottom: 1px solid #eeeff3;
				height: 60px;
			}

			.input-p {
				line-height: 20px;
				position: absolute;
				// width: 120px;
				height: 20px;
				font-size: 12px;
				font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
				font-weight: 400;
				color: #FF7474;
			}




		}

		.login-btn {
			margin-top: 52px;
			width: 100%;
		}

		.btn-size {
			width: 100%;
			height: 48px;
			margin-bottom: 17px;

		}

		.login-btn-p {
			text-align: center;
			font-size: 14px;
			font-family: 'HarmonyOS Sans SC-Regular, HarmonyOS Sans SC';
			font-weight: 400;
			color: #2F6CBC;
		}

	}
</style>
